<script>
export default {
  name: 'RegisterForm',
  data() {
    // 自定义验证密码
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 8) {
        callback(new Error('密码长度不能小于8位'))
      } else {
        if (this.form.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword')
        }
        callback()
      }
    }

    // 自定义验证确认密码
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }

    return {
      form: {
        legalCode: '',
        password: '',
        confirmPassword: '',
        agencyName: '',
        agencyRepresent: '',
        checkCode: '',
        checkKey: '',
      },
      rules: {
        legalCode: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }],
        confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
        agencyName: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        agencyRepresent: [{ required: true, message: '请输入单位法人姓名', trigger: 'blur' }],
        checkCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
        ],
      },
      captchaUrl: '',
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log('submit form:', this.form) /*/ register / agencyLegal / regist*/
          this.$http.post('/register/agencyLegal/regist', this.form).then(r => {
            this.$message.success('注册成功')
            this.$router.replace('/user/login')
          })
        } else {
          return false
        }
      })
    },
    // 检查账号
    checkAccount() {
      if (!this.form.legalCode) {
        this.$message.error('请先输入账号')
        return
      }
      this.$http.post('/register/agencyLegal/queryByInfo', { legalCode: this.form.legalCode }).then(r => {
        if (!r.result.agencyId) {
          this.$message.success('账号可以使用')
        } else {
          this.$message.error('账号已占用')
        }
      })
    },
    // 检查单位名称
    checkAgencyName() {
      if (!this.form.agencyName) {
        this.$message.error('请先输入单位名称')
        return
      }
      this.$http.post('/register/agencyLegal/queryByInfo', { agencyName: this.form.agencyName }).then(r => {
        if (!r.result.agencyId) {
          this.$message.success('账号可以使用')
        } else {
          this.$message.error('账号已占用')
        }
      })
    },
    // 刷新验证码
    refreshCaptcha() {
      this.form.checkKey = Math.random()
      this.$http
        .get('/register/common/randomImage/' + this.form.checkKey)
        .then(response => {
          // 可以在此处更新 UI 或执行其他操作
          this.captchaUrl = response.result
        })
        .catch(error => {
          console.error('获取验证码失败:', error)
        })
      // this.captchaUrl = `/api/captcha?t=${new Date().getTime()}`
    },
  },
  created() {
    this.refreshCaptcha()
  },
}
</script>

<template>
  <div class="register-container">
    <div
      class="group_2 flex-row justify-between"
      style="display: flex;justify-content: space-between;align-items: center"
    >
      <div class="text-wrapper_1 flex-col">
        <span class="text_1">阅读注册协议</span>
      </div>
      <div class="text-wrapper_2 flex-col">
        <span class="text_2">填写相关信息</span>
      </div>
      <div class="text-wrapper_3 flex-col">
        <span class="text_3">注册完成</span>
      </div>
    </div>
    <div class="register-form">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-model-item label="账号(组织机构代码/统一社会信用代码号):" prop="legalCode">
          <a-input v-model="form.legalCode" placeholder="请输入账号">
            <template #suffix>
              <a-button type="link" @click="checkAccount">检测账号</a-button>
            </template>
          </a-input>
        </a-form-model-item>

        <a-form-model-item label="密码:" prop="password">
          <a-input-password v-model="form.password" placeholder="请输入密码" :maxLength="20" />
          <span class="form-item-hint">(密码至少8位)</span>
        </a-form-model-item>

        <a-form-model-item label="确认密码:" prop="confirmPassword">
          <a-input-password v-model="form.confirmPassword" placeholder="请再次输入密码" :maxLength="20" />
          <span class="form-item-hint">(请再一次输入密码)</span>
        </a-form-model-item>

        <a-form-model-item label="单位名称:" prop="agencyName">
          <a-input v-model="form.agencyName" placeholder="请填写单位的全称">
<!--            <template #suffix>
              <a-button type="link" @click="checkAgencyName">检测单位名称</a-button>
            </template>-->
          </a-input>
        </a-form-model-item>

        <a-form-model-item label="单位法人:" prop="agencyRepresent">
          <a-input v-model="form.agencyRepresent" placeholder="请输入单位法人姓名" />
        </a-form-model-item>

        <a-form-model-item label="验证码:" prop="checkCode">
          <a-row type="flex" :gutter="8" style="align-items: center">
            <a-col :span="12" style="margin-top: -6px;">
              <a-input v-model="form.checkCode" placeholder="请输入验证码" />
            </a-col>
            <a-col :span="12">
              <div class="captcha-container" @click="refreshCaptcha" style="width:200px;height:50px;">
                <img :src="captchaUrl" alt="验证码" />
              </div>
            </a-col>
          </a-row>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 16, offset: 8 }">
          <a-button type="primary" block @click="submitForm">
            注册
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<style scoped lang="less">
.flex-col {
  display: flex;
  flex-direction: column;
}
.group_2 {
  width: 1140px;
  height: 68px;
  margin: 20px auto;
  .text-wrapper_1 {
    align-items: center;
    justify-content: center;
    color: #fff;
    height: 68px;
    background: url(../../../assets/psnbgzk95h74drbaz9hsmw6l83vmjfiup82377d7f-67e6-4b9d-b310-0dcb380fe1d0.png) 100%
      no-repeat;

    font-size: 24px;
    background-size: 100% 100%;
    width: 379px;
    .text_1 {
    }
  }
  .text-wrapper_2 {
    justify-content: center;
    color: #fff;
    align-items: center;
    height: 68px;
    background: url(../../../assets/ps0hpp75g3ufcgx8xwulx0qc9qex5vybsv61395fd6-7fcb-4d86-bba7-aa62de00dbf4.png) 100%
      no-repeat;
    font-size: 24px;
    background-size: 100% 100%;
    margin-left: 1px;
    width: 379px;
    .text_2 {
    }
  }
  .text-wrapper_3 {
    justify-content: center;
    color: #fff;
    font-size: 24px;
    align-items: center;
    height: 68px;
    background: url(../../../assets/psmbar0un8xfdnbpxjg5ktcnpva1w9f2vre6603fc9-c43d-416b-8073-82b961d17e34.png) 100%
      no-repeat;
    background-size: 100% 100%;
    margin-left: 1px;
    width: 380px;
    .text_3 {
    }
  }
}
.register-container {
  width: 100%;
}

.register-form {
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  padding: 20px;
  max-width: 900px;
  border-radius: 4px;
}

.register-title {
  position: relative;
  padding-left: 12px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.title-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #1890ff;
}

.form-item-hint {
  color: #999;
  font-size: 12px;
  margin-left: 4px;
}

.captcha-container {
  height: 32px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  overflow: hidden;
}

.captcha-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 调整表单项间距 */
.ant-form-item {
  margin-bottom: 24px;
}

/* 调整按钮样式 */
.ant-btn-primary {
  height: 40px;
  font-size: 16px;
}
</style>
